<template>
	<view class="technician-list-item ">
		<view class="list-item fill-base radius-16 box-shadow" @tap.stop="toEmit('info')">
			<view class="work-img rel">
				<image mode="aspectFill" class="work-img" :src="info.work_img"> <!--@tap.stop="toEmit('workImg')" -->
				</image>
				<view class="abs technician-type" :class="[`text-type-${info.text_type}`]">{{textType[info.text_type]}}</view>
				<!-- <view class="technician-status flex-center f-ms-little abs" :class="[`text-type-${info.text_type}`]">
					{{textType[info.text_type]}}
					<view class="line ml-sm mr-sm"></view>
					<view class="flex-y-center">
						<i class="iconfont iconjuli1"></i>
						{{info.distance}}
					</view>
				</view> -->
				<view class="abs technician-tag flex-center f-ms-little c-base pl-sm pr-sm" :class="[`tag-type-${info.text_type}`]" v-if="info.tag_name">
					{{info.tag_name}}
				</view>
				<!-- <view class="near-time-order flex-between c-base abs">
					<view>
						<block v-if="info.near_time">最早可约 {{info.near_time}}</block>
					</view>
					<view>已服务{{info.order_num > 9999 ? '9999+' : info.order_num}}单</view>
				</view> -->
			</view>
			<view class="content-info">
				<view class="c-black text-bold ellipsis f-title max-300">{{info.coach_name}}
				</view>
				<view class="f-caption c-caption pt-sm ellipsis">身高{{info.height}}·体重{{info.weight}}·{{info.constellation}}</view>
				<view class="f-caption c-caption pt-sm ellipsis max-300">{{info.text}}</view>
				<view class="flex-between pt-sm">
					<view class="flex-center">
						<text style="color: #E94A48;" class="f-paragraph">￥</text>
						<text style="color: #E94A48;" class="f-md-title text-bold">{{info.price | handlePrice}}</text>
						<text class="f-caption" style="color: #9BA2AA;">/单</text>
					</view>
					<view class="flex-center">
						<i class="icondizhi iconfont" style="color: #DDDDDD;"></i>
						<text class="f-caption c-icontext " style="padding-left: 6rpx;">{{info.distance}}</text>
					</view>
				</view>
				
				<!-- <view class="btn-list flex-between f-desc text-bold">
					<view @tap.stop="toEmit('selfImg')" class="btn-item flex-center"
						:style="{border:`1rpx solid ${primaryColor}`,color:primaryColor}">生活照</view>
					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:150rpx;">
						<view @tap.stop="toEmit('order')" class="btn-item flex-center c-base"
							:style="{border:`1rpx solid ${primaryColor}`,background:primaryColor}">邀约</view>
					</auth>
				</view> -->
				<!-- <view class="count-list flex-center pt-md">
					<view @tap.stop="toEmit('comment')" class="flex-y-center"><i
							class="iconfont iconpinglun2"></i>{{info.comment_num > 9999 ? '9999+' : info.comment_num}}
					</view>
					<view @tap.stop="toEmit('collect')" class="flex-1 flex-center">
						<view class="flex-y-center"><i class="iconfont"
								:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
								:style="{color:info.is_collect ? primaryColor :''}"></i>{{info.collect_num > 9999 ? '9999+' : info.collect_num}}
						</view>
					</view>
					<view @tap.stop="toEmit('info')" class="flex-y-center"><i class="iconfont"
							:class="[{'icondianming':plugAuth.store && info.store && info.store.id},{'iconxiangqing':!plugAuth.store || !info.store}]"></i>{{plugAuth.store && info.store && info.store.id?'门店':'详情'}}
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			from: {
				type: String,
				default () {
					return 'list'
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				textType: {
					1: '可接单',
					2: '接单中',
					3: '休息中',
					4: '不可接单'
				},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			plugAuth: state => state.config.configInfo.plugAuth,
			userInfo: state => state.user.userInfo,
		}),
		filters: {
			handlePrice(val){
				return val >= 10000 ? (val/10000).toFixed(1) + 'w' : val
			}
		},
		methods: {
			toEmit(key) {
				this.$emit(key)
			}
		}
	}
</script>

<style scoped lang="scss">
	.technician-list-item {
		.list-item {
			width: 334rpx; 
			.work-img {
				width: 334rpx;
				height: 392rpx;
				border-radius: 16rpx 16rpx 0 0;
				overflow: hidden;

				.near-time-order {
					width: 334rpx;
					height: 34rpx;
					padding: 0 16rpx;
					font-size: 20rpx;
					background: rgba(0, 0, 0, 0.64);
					left: 0;
					bottom: 0;
					z-index: 2;
				}
			}

			.content-info {
				padding: 18rpx 15rpx;
				border-bottom-left-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
				.star {
					color: #FF9300;

					.iconfont {
						font-size: 26rpx;
						margin-right: 5rpx;
					}
				}


				.btn-list {
					margin-top: 13rpx;

					.btn-item {
						width: 150rpx;
						height: 53rpx;
						border-radius: 8rpx;
						transform: rotateZ(360deg);
					}
				}

				.count-list {
					color: #B1A7A9;
					font-size: 22rpx;

					.iconfont {
						font-size: 28rpx;
						color: #999;
						margin-right: 4rpx;
					}

				}
			}
			.technician-type{
				width: 160rpx;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				top: 20rpx;
				right: -40rpx;
				text-align: center;
				font-size: 20rpx;
				padding: 4rpx 0;
			}
			.technician-status {
				top: -1rpx;
				left: 0;
				min-width: 207rpx;
				height: 40rpx;
				padding: 0 15rpx;
				border-radius: 16rpx 0 26rpx 0;
				border: 1rpx solid #FFFFFF;
				border-top: transparent;
				border-left: transparent;
				transform: rotateZ(360deg);
				z-index: 2;

				.line {
					width: 1rpx;
					height: 17rpx;
				}

				.iconfont {
					font-size: 22rpx;
					margin-right: 4rpx;
				}
			}
			
			.technician-tag{
				height: 39rpx;
				top: 2px;
				left: 2px;
				border-radius: 39rpx;
				z-index: 2;
			}

			.text-type-1 {
				color: #4600E6;
				background: linear-gradient(270deg, #AE95F9 0%, #D9CCFF 51%, #C8B6FF 100%);

				.line {
					background: #4600E6
				}
			}
			// .tag-type-1{
			// 	color: #fff;
			// 	background: #FF4C88;
			// }
			.tag-type-1 ,.tag-type-2, .tag-type-3 , .tag-type-4{
				color: #fff;
				background: rgba(0, 0, 0, 0.4)
			}
			.text-type-2 {
				color: #FF1E48;
				background: linear-gradient(270deg, #FFA3B4 0%, #FFCCD5 37%, #FFC5CF 100%);

				.line {
					background: #FF1E48
				}
			}

			.text-type-3 {
				color: #FF701E;
				background: linear-gradient(270deg, #FFCFA3 0%, #FFE0CC 43%, #FFD0A4 100%);

				.line {
					background: #FF701E
				}
			}

			.text-type-4 {
				color: #333;
				background: linear-gradient(270deg, #fff 0%, #DCDCDC 43%, #C0C0C0 100%);

				.line {
					background: #333
				}
			}

		}

	}
</style>
